<template>
	<view class="">
		<navBar title="巡检"></navBar>
		<handling :text="text" @statusdetails="statusdetails"></handling>
		<tableList :pageTurning="pageTurning" :dataList="dataList" :selectionBox="status === 1 ? true : false"
			@particulars="particularsUrl" @multiParticulars="multiParticularsUrl">
		</tableList>
		<view class="w-100% h-500rpx" v-if="status === 1">
		</view>
		<view class="suctionbottomTwo" v-if="status === 1">
			<subtitle titleText="工序批量巡检"></subtitle>
			<view class="w-100% ml-32rpx mr-32rpx">
				<view class="mt-24rpx mb-32rpx select flex-space-between">
					<view class="">
						工序选择
					</view>
				</view>
				<u-radio-group v-model="process" @change="radioChange">
					<u-radio class="mb-30rpx" v-for="(item, index) in selectlist" :key="index" :name="item.value"
						:disabled="item.disabled">
						<view class="w-146rpx select2">
							{{item.name}}
						</view>
					</u-radio>
				</u-radio-group>
			</view>
			<view class="w-100% h-1rpx" style="background: #EEEEEE;"></view>
			<view v-if="processDescsingle && status === 1" class="yes button" @click="upload">
				工序批量巡检
			</view>
			<view class="no button" @click="uploadMistake" v-if="!processDescsingle && status === 1">
				工序批量巡检
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import navBar from '@/components/navbar.vue'
	import tableList from '@/components/tableList.vue'
	import handling from '@/components/handling.vue'
	import subtitle from '@/components/subtitle.vue'
	import { selectPadTask, queryDictInfo } from '@/common/api/operationApi'
	import { onShow, onReachBottom } from "@dcloudio/uni-app"
	import { ref, watch } from 'vue'

	const dataList = ref<string[]>([])
	const text = ref<any>({
		text1: '待办',
		text2: '已办'
	})
	const status = ref<number>(1)
	const statusdetails = (val : any) => {
		status.value = val
		tabList()
	}
	onShow(() => {
		page.value = 1
		tabList()
		select()
	})
	const pageTurning = ref<boolean>(false)
	onReachBottom(() => {
		if (numberpages.value >= page.value) {
			page.value++
			selectPadTask({
				status: status.value,
				taskType: 11,
				page: page.value,
				size: size.value,
				processCode: processCode.value
			}).then((data) => {
				dataList.value.push(...data.items)
				data.items.length === 20 ? pageTurning.value = true : pageTurning.value = false
			})
		}
	})
	watch(
		() => status.value,
		() => {
			radioChange(processCode.value)
		},
		{ deep: true }
	);
	const page = ref<number>(1)
	const size = ref<number>(20)
	const numberpages = ref<number>()
	const processCode = ref<number>(0)
	async function tabList() : Promise<void> {
		const data = await selectPadTask({
			status: status.value,
			taskType: 11,
			page: page.value,
			size: size.value,
			processCode: processCode.value
		})
		dataList.value = data.items
		numberpages.value = Math.ceil(data.count / size.value)
		data.items.length === 20 ? pageTurning.value = true : pageTurning.value = false
	}
	const selectlist = ref<string[]>([])
	async function select() {
		const dataselect = await queryDictInfo({
			taskType: 11
		})
		selectlist.value = dataselect
	}

	function particularsUrl(prodWork : string[], processDesc : string, id : string[]) {
		var url = ''
		if (status.value === 1) {
			url = `/pages/PatrolInspection/needToBeDealtWith?processDesc=${processDesc}&prodWorkList=${prodWork}&id=${id}`
		} else {
			url = `/pages/PatrolInspection/alreadyHandled?processDesc=${processDesc}&prodWorkList=${prodWork}&id=${id}`
		}
		uni.navigateTo({
			url: url
		});
	}
	const process = ref<number>()
	function radioChange(e) {
		if (processCode.value === e) {
			process.value = 0
			processCode.value = 0
		} else {
			processCode.value = e
		}
		page.value = 1
		tabList()
	}
	const processDescsingle = ref<boolean>()
	const processDesc = ref<string>()
	const prodWorkList = ref<string>()
	const listId = ref<string>()

	function multiParticularsUrl(a, b, c, d) {
		processDescsingle.value = a
		processDesc.value = b
		prodWorkList.value = c
		listId.value = d
		if (processDesc.value === undefined) {
			processDescsingle.value = false
		}
	}
	function upload() {
		var url = ''
		if (processDescsingle.value) {
			if (status.value === 1) {
				url = `/pages/PatrolInspection/needToBeDealtWith?processDesc=${processDesc.value}&prodWorkList=${prodWorkList.value}&id=${listId.value}`
			} else {
				url = `/pages/PatrolInspection/alreadyHandled?processDesc=${processDesc.value}&prodWorkList=${prodWorkList.value}&id=${listId.value}`
			}
		} else {
			uni.showToast({
				title: '请选择相同工艺的进行批量检',
				icon: 'none',
			});
		}
		uni.navigateTo({
			url: url
		});
	}
	function uploadMistake() {
		if (processDesc.value !== undefined && processDesc.value.length > 0) {
			if (!processDescsingle.value) {
				uni.showToast({
					title: '请选择相同工艺的进行批量检',
					icon: 'none',
				});
			} else {
			}
		} else {
			uni.showToast({
				title: '请选择订单',
				icon: 'none',
			});
			processDescsingle.value = false
		}
	}
</script>

<style scoped>
	.suctionbottomTwo {
		width: 100%;
		position: fixed !important;
		background-color: #fff;
		bottom: 0;
		z-index: 198;
		box-shadow: 0px 2rpx 10rpx 0px rgba(207, 207, 207, 0.5);
	}

	.suctionbottomTwo .button {
		margin: 16rpx 24rpx 16rpx;
		height: 88rpx;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		line-height: 84rpx;
		text-align: center;
	}

	.suctionbottomTwo .yes {
		background: #2F7BFF;
		border: 1rpx solid #2F7BFF;
		color: #FFFFFF;
	}

	.suctionbottomTwo .yes:active {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}

	.suctionbottomTwo .no {
		background: #99beff;
		border: 1rpx solid #99beff;
		color: #FFFFFF;
	}

	.select {
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4B4D55;
	}

	.select2 {
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
	}

	::v-deep .u-radio__icon-wrap {
		width: 32rpx !important;
		height: 32rpx !important;
	}
</style>